<template>
    <div class="login-container">
        <div class="login-box">
            <!--头像区域-->
            <div class="avatar-box">
                <img class="avatar" src="../assets/logo.png"/>
            </div>
            <!--表单区域-->
            <div class="form-login">
              <!--表单区域-->
              <div class="form-login">
                <!--登录名称-->
                <div class="form-group">
                <label for="username">登录名称:</label>
                <input
               type="text"
               class="form-control"
               id="username"
               placeholder="请输入登录名称"
               autocomplete="off"
                v-model.trim="username"
              />
          </div>
            <!--登录密码-->
            <div class="form-group">
                <label for="password">登录密码:</label>
                <input
                    type="password"
                    class="form-control"
                    id="password"
                    placeholder="请输入登录密码"
                    v-model.trim="password"
             />
          </div>
             <!--登录按钮-->
            <div class="form-group">
                 <button type="button" class="btn" @click="onLogin">登录</button>
            </div>
        </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const username = ref('')
const password = ref('')
const router = useRouter()
const onLogin = () => {
    if (username.value === '501' && password.value === '1234') {
        localStorage.setItem('token', 'Bearer xxx')
        localStorage.setItem('username', username.value)
        localStorage.setItem('password', password.value)
        router.push('/home')
    } else {
        alert('用户名或密码输入错误')
        localStorage.removeItem('token')
        localStorage.removeItem('username')
        localStorage.removeItem('password')
    }
}
</script>









<style scoped>
.login-box {
  background-color: #ffffff;
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  width: 400px;
  z-index: 2;
  position: relative;
}
.avatar-box {
  text-align: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.form-group {
  margin-bottom: 20px;
}

label {
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: #409EFF;
  outline: none;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}
.btn {
  width: 100%;
  padding: 12px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #337ecc;
}

.login-container {
  width: 100%;
  height: 100vh;
  background: url('../assets/logo.png') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 500px) {
  .login-box {
    width: 90%;
    padding: 20px;
  }

  .form-control {
    font-size: 13px;
  }
}
.form-login {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  text-align: left;
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: #409EFF;
  outline: none;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}
</style>